<template>
  <div>
    <el-drawer
      :title="$t('message.fjjl')"
      :visible.sync="isShowModal"
      :before-close="handleClose"
      size="900px"
    >
      <QueryForm
        v-model="filters"
        :query-form-config="queryFormConfig"
        @handleQuery="getList(1)"
        @clear="clearFilters"
      />
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column
          align="center"
          :label="$t('message.hync')"
          prop="name"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.sjh')"
          prop="phone"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.cardnum')"
          prop="cardNum"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.yhjtc')"
          prop="objName"
          min-width="110"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.fjsj')"
          prop="assignTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.syzt')"
          prop="name"
          min-width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status == '0'">{{ $t('message.wsy') }}</span>
            <span v-if="scope.row.status == '1'">{{ $t('message.ysy') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.dxfs')"
          prop="name"
          min-width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.msgStatus == '0'">{{ $t('message.fscg') }}</span>
            <span v-else-if="scope.row.msgStatus == '1'">{{ $t('message.fssb') }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <Paginations
          :total="totalCount"
          :page="pagination.page"
          @current-change="getList"
          @SizeChange="handleSizeChange"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  couponDirectedRecord
} from '@/api'
import { queryFormConfig } from './config'

export default {
  data() {
    return {
      agcId: '',
      queryFormConfig,
      cgList: [],
      pagination: {
        page: 1,
        rows: 10
      },
      list: [],
      totalCount: 0,
      listLoading: false,
      meta: [],
      filters: {},

      isShowModal: false
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
  },
  methods: {
    getList(page) {
      const { pagination, filters: param } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      if (param.selTime && param.selTime.length > 0) {
        param.startTime = param.selTime[0]
        param.endTime = param.selTime[1]
      } else {
        param.startTime = null
        param.endTime = null
      }
      param.agcId = this.agcId
      this.listLoading = true
      couponDirectedRecord({
        pagination,
        param
      }, sessionStorage.getItem('venueId')).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.totalCount = res.totalCount
          this.list = res.recordList
        }
      }).catch(err => {
        this.listLoading = false
        console.log('-----', err)
      })
    },
    handleClose() {
      this.isShowModal = false
      this.$emit('close')
    },
    handleSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    // 清空筛选项
    clearFilters() {
      this.filters = {}
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.title_warnning {
  height: 36px;
  line-height: 36px;
  background: #f0f3fa;
  border-radius: 2px;
  color: #435ebe;
  padding-left: 20px;
}
</style>
